/*这个添加前后Speed框有细小变化*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/*你想要设置的边框和内边距的值是包含在 width 内的。
也就是说，如果你将一个元素的 width 设为 100px，
那么这 100px 会包含它的 border 和 padding，
内容区的实际宽度是 width 减去 (border + padding) 的值。
大多数情况下，这使得我们更容易地设定一个元素的宽高。*/
* {/*  *号意思是所有的标签都有的属性  */
    box-sizing: border-box;
  }

  body {
    background-color: rgb(122, 233, 196);
    font-family: 'Roboto', sans-serif;
    height: 100vh;/*铺满整个盒子*/
    overflow: hidden;/*溢出时隐藏*/
    margin: 0;
  }

#box {
    background-color: rgb(122, 233, 196);
    font-family: 'Roboto', sans-serif;
    display: flex;/*弹性盒子布局*/
    flex-direction: column;
    align-items: center;/*交叉轴的中点对齐*/
    justify-content: center;/*居中排列*/
    height: 100vh;/*铺满整个盒子*/
    overflow: hidden;/*溢出时隐藏*/
    margin: 0;
  }
  
  #bottom {
    position: absolute;/*意味着这个盒子对其它盒子没有影响*/
    bottom: 20px;
    background: rgba(0, 0, 0, 0.1);/*颜色和透明度*/
    padding: 10px 20px;
    font-size: 18px;
  }

  input {
    width: 50px;
    padding: 5px;
    font-size: 18px;
    background-color: rgb(122, 209, 233);
    border: none;
    text-align: center;
  }

  input:focus {
    /*使outline属性无效，使绘制于元素周围的一条线无效*/
    outline: none;/*删除后，input框的边框就会出来*/
  }

  .ripple{
    background-color: rgb(122, 233, 196);
    font-size: 14px;
    text-transform: uppercase;/*控制文本属性大小写   仅有大写字母*/
    letter-spacing: 2px;
    padding: 20px 30px;
    overflow: hidden;
    margin: 10px 0;
    position: relative;/*删除后没有影响*/
    text-decoration: none;
  }
  
  .container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding:10 px 20px;
    text-align: center;
    max-width: 100%;/*设置段落的最大宽度，删了没啥变化*/
    width: 350px;
    position:fixed;
    left: 20px;
    top: 20px;
  }

  h3 {
    margin: 0;
    opacity: 0.5;/*不透明度*/
    letter-spacing: 2px;
  }

  .btn {
    background-color: #9f68e0;
    color: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 4px 10px;
    font-size: 8px;
    cursor: pointer;/*鼠标变成小手*/
    height: 30px;
    width:150px;
  }

  /*active 伪类一般被用在 <a> 和 <button> 元素中
  适用于一个元素被用户激活时，例如用户在按下鼠标之后放开鼠标之前的这一段时间内。
   当用户放开鼠标后，恢复元素原有的样式*/
  .btn:active {
    transform: scale(0.98);/*函数 scale() 用于修改元素的大小。
    可以通过向量形式定义的缩放值来放大或缩小元素，
    同时可以在不同的方向设置不同的缩放值。

    但是这个莫名其妙失效了*/
  }

  .btn:focus {
    outline: 0;
  }

/*最上面搜索*/
 
.search2 {
  position: fixed;
  height: 50px;
  top:15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search2 .input2 {
  background-color: #fff;
  border: 0;
  font-size: 18px;
  padding: 15px;
  height: 50px;
  width: 50px;
 transition: width 0.3s ease; /*ease缓解*/
}

.btn2 {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease;
  /*当按钮和input框的变化速度一样的时候，才会丝滑*/
}

.btn2:focus,
.input2:focus {
  outline: none;
}/*删了之后没啥影响*/



/*激活后input框的宽度改变*/
.search2.active .input2 {
  width: 200px;
}

/*激活后搜索按钮移动*/
.search2.active .btn2 {
  transform: translateX(198px);/*水平方向上移动元素*/
}



/*@keyframes scale {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}   这段没啥用*/


/*转动的图*/
.kinetic {
  position:relative;
  height: 80px;
  width: 80px;
}



/*基于 CSS 的方式通过 DIV 的 border 属性绘制两个顶角向上图形重合的正三角形
然后顺时针旋转其中一个三角形，让其相差90度（旋转的中心，在 DIV 的中心即三角形的顶点）
然后定义动画属性，让两个三角形相差90度的进行无限循环旋转。*/
.kinetic::after,
.kinetic::before {
  content: '';
  position: absolute;
  top: 0;/*宽高为0就是三角形*/
  left: 0;
  width: 0px;
  height:0px;
  border: 50px solid transparent;/*绘制梯形状*/
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;/*动画延迟执行的时间：0.5s*/
}

.kinetic::before {
  transform: rotate(90deg);/*元素绕一个懂点旋转九十度*/
  /*动画名称  动画持续时间  动画的速率（匀速）  动画循环的次数（无限次）*/
  animation: rotateB 2s linear infinite;
}

@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }

  50%,
  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }

  50%,
  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(450deg);
  }
}


/*多个按钮*/

.three{
position: fixed;
right:10px;
top:100px;
}


.toggle-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 200px;
}

/*.toggle {
  visibility: hidden;
}     隐藏选项框*/

/*.label {
  position: relative;
  background-color: #d0d0d0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  margin: 0 15px 0;
  width: 80px;
  height: 40px;
}  那三个圆球*/

.toggle:checked + .label {
  background-color: #8e44ad;
}

/*.ball {
  background: #fff;
  height: 34px;
  width: 34px;
  border-radius: 50%;     /*设置成圆
  position: absolute;
  top: 3px;
  left: 3px;
  align-items: center;
  justify-content: center;
  animation: slideOff 0.3s linear forwards;
}*/

/*.toggle:checked + .label .ball {
  animation: slideOn 0.3s linear forwards;
}       不知道干啥的*/

/*@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(40px) scale(1);
  }
}

@keyframes slideOff {
  0% {
    transform: translateX(40px) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}